/*
 *01.创建对象 
 * 02.计算所有商品的总价
 * 02-1.获取所有商品价格的标签
 * 03.全选事件
 * 03-1.全选事件的绑定
 */
var phoneList ={
	// 初始化
	init: function(){
		
		this.bindEvent();
		this.getPhoneList();
	},
	// 绑定事件
	bindEvent: function(){
		// 添加到购物车的事件托管
		$('#prd-list').on('click','.add',function(){
			// 阻止冒泡
			event.stopPropagation();
			phoneList.addCar(this);
			
		});
		// 全选事件的绑定
		$('#total').on('click',function(){
			// 一般要先测试是否绑定成功 两种方式01alert(),02console.log()
			phoneList.selectAll(); // 绑定成功后函数调用，选框自动会被勾选
		});
		
		
		// 绑定商品选中事件(事件托管)
		$('#order-list').on('click','.checkbox',function(){
			// 阻止冒泡()
			event.stopPropagation();
			phoneList.selectPrd();
		});
		// 绑定跳转详情事件(事件托管)***重点注意此处托管事件不可以调顺序，否则所写事件不生效
		$('body').on('click','.prd-item',function(){
			//此处this指向.prd-item(li)
			var id = $(this).data('id')
			phoneList.goToDetail(id); // 传入id
		});
		// 购物车中商品详情跳转事件(事件托管)
		$('body').on('click','.order',function(){
			// 通过判断所点击的类(不是label)来决定是否需要进行下一步的跳转事件
			if(event.target.className !== 'label'){
				phoneList.goToDetail();
			}
			
		});
		
		
		
	},
	// 渲染页面
	render: function(data){
		var htmlStr = '';
		var item
		for(var i=0;i<data.length;i++){
			item = data[i];
			htmlStr += `
				<li 
					data-id = "${item.id}"
					data-price = "${item.price}"
					data-prdName="${item.prdName}"
					class="prd-item rel mg-top-xl">
					<div class="img-box">
						<img class="img" src="${item.imgUrl}">
					</div>
					<p class="lh-xl">¥ <span class="price">${item.price}</span> 包邮</p>
					<p class="disc lh-xl">${item.disc}</p>
					<p class="store lh-xl">${item.store}</p>
					<img class="add abs" src="add.png"/>
				</li>`;
		}
		$('#fixed').before(htmlStr);
		
	},
	// 添加到购物车
	addCar: function(ev){
		// ev表示原生js对象
		// 隐藏提示信息
		$('#empty').hide();
		// 创造一个JQli标签
		var $li = $(ev).closest('li');
		
		var id = $li.data('id');
		var price = $li.data('price');
//		var disc = $li.data('disc');
		var prdname = $li.data('prdname');
		var $orderLi = $(`#order-list [data-id=${id}]`);
//		console.log($li.data('prdName'));
		console.log( $(`#order-list`));
		// 已经添加
		if($orderLi.length > 0){
			// 通过父元素查找num属性
			var $num = $orderLi.find('.num');
			// 获取数量
			var num = $num.text();
			$num.text(++num);
			// 修改单个商品的总价
			var $price = $orderLi.find('.price span').text(price * num);
			
		}else{
			htmlStr = `
					<li class="order" data-id="${id}">
						<input class="checkbox" type="checkbox" id="${id}" />
						<label class="label" for="${id}"></label>
						<span class="prd"><span>${prdname}</span><span>X</span><span class="num">1</span></span>
						<span class="fr price">￥<span>${price}</span></span></li>`;
			$('#order-list').append(htmlStr);
		}
	// 判断勾选框额外需要额外添加新的商品	，全选框则取消
	this.selectPrd();
	},
	
	selectPrd: function(){
		// 选中的时候算总价
		this.getTotalMoney();
		// 判断选中的商品是否和添加的商品的数量相等，根据情况改变全选框是否需要勾选
		var isSelectAll = $('#order-list input:checked').length === $('#order-list input').length;
		console.log(isSelectAll);
		// 此处操作注意一个BUG，额外添加新的商品，全选按钮被取消
		$('#total').prop('checked',isSelectAll);
	},
	
	// 页面跳转
	goToDetail: function(id){	// 	接收id
		sessionStorage.setItem('id',id);
		location.href = 'detail.html?id=' +id;
	},
	
	
	
	
	
	
	// 每个商品累加的总价事件
	getTotalMoney: function(){
			
		// 定义JQ对象存储被选中的标签      
		// !!!注意要获取的内容，此前因为input只提示被选中，所以函数下面无法实现
		var $prices = $('#order-list input:checked');
		// 定义变量存储总价
		var sum = 0;
		// 对被选中的对象进行遍历
		for(var i=0;i<$prices.length;i++){
			var $money = $($prices[i]).closest('li').find('.price span');
			var money = $money.text();
			sum += Number(money);
		}
		$('#total-money').text(sum);
	},
	
	
	// 全选事件
	selectAll: function(){
		// 获取全选框
		var isChecked = $('#total').prop('checked');
		// 判断全选框是否和勾选的选框相等，是的话则计算总价(调用函数)
		$('#order-list .checkbox').prop('checked',isChecked);
		phoneList.getTotalMoney();
	},
	
	// 
	
	
	
	// 获取详情数据
	getPhoneList: function(){
		console.log(33);
		var url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/phoneList';
		var data = {};
		$.ajax({
			type:"get",
			url:url,
			data: data,
			success: function(res){
				console.log(res);
				phoneList.render(res.data.list);
			},
			error: function(){
				alert('网络异常，请稍后再次尝试')
			},
			complete: function(){
				console.log('完事')
			}
		});
	}
	
}
phoneList.init();